<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/jquery-2.0.0.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/jquery-ui"></script>
<link
	href="${pageContext.request.contextPath }/css/bootstrap/bootstrap-combined.min.css"
	rel="stylesheet" media="screen">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/kissy.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/waterfall.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/loader.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/base.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/collection.js"></script>
<link
	href="${pageContext.request.contextPath}/css/designer/designer_special.css"
	rel="stylesheet">
</head>

<body>
	<div class="container-fluid" style="padding: 0 !important;">
		<div class="row-fluid">
			<div class="span12">
				<ul id="myTab" class="nav nav-tabs">
					<li class="active"><a href="" data-toggle="tab">收藏作品</a></li>
					<li><a href="">收藏服装</a></li>
					<li><a href="">收藏面料</a></li>
				</ul>
				<div id="myTabContent" class="tab-content">
					<div class="tab-pane fade in active kissy" id="design">
						<c:forEach items="${data.list}" var="data">
							<div class="ks-waterfall">
								<div class="special">
									<img
										src="${pageContext.request.contextPath}/${data.design.effect_url}">
									<a class="left">${data.design.name}</a> <a class="right">${data.design.designerInfo.name}</a>
								</div>
							</div>
						</c:forEach>
					</div>
					<script>
						KISSY.use("waterfall,ajax,node", function(S, Waterfall,
								io, Node) {
							var $ = Node.all;
							var waterfall = new Waterfall({
								container : "#design",
								minColCount : 2,
								colWidth : 190,
								align : "justify"
							});
						});
					</script>
					<!--分页-->
					<div class="paging">
						<div style="display: none;">
							<span class="pages">${data.property.pageCount}</span>
							<!--页数-->
							<span class="pageIndex">${data.property.pageIndex}</span>
							<!--当前页码-->
							<span class="pagesize">12</span>
							<!--每页记录数-->
							<span class="selfUrl">/collection/deal_collection.do</span>
							<!--请求action-->
							<span class="object_type">1</span>
							<!--收藏类型-->
							<span class="userId">${user_id }</span>
							<!--用户ID-->
							<span class="commonUrl">${pageContext.request.contextPath}</span>
							<!--绝对路径-->
						</div>
						<div class="showPaging">
							<a class="prev"
								href="${pageContext.request.contextPath}/collection/deal_collection.do?designer_id=${userId }&pageindex=${json.property.pageIndex-1 }&pagesize=12">
								上一页</a> <select class="pageNum">
								<option value="0">第一页</option>
							</select> <a class="next"
								href="${pageContext.request.contextPath}/collection/deal_collection.do?designer_id=${userId }&pageindex=${json.property.pageIndex+1 }&pagesize=12">
								下一页</a>
						</div>
					</div>
					<!--分页结束-->
				</div>
				<script>
					$(function() {
						$('a[data-toggle="tab"]')
								.on(
										'shown.bs.tab',
										function(e) {
											// 获取已激活的标签页的名称
											var activeTab = $(e.target).text();
											// 获取前一个激活的标签页的名称
											var previousTab = $(e.relatedTarget)
													.text();
											$(".active-tab span").html(
													activeTab);
											$(".previous-tab span").html(
													previousTab);
										});
					});
				</script>

			</div>
		</div>
	</div>
</body>

</html>
